<template>
  <div class="timetable">
    <div class="campusManagementBox bx">
      <!-- <div class="commonBoxScreening br mb14" >
        <div class="searchBox bx">
          <img src="static/images/search.png" alt="" srcset="">
          <input type="text">
        </div>
        <span style="margin-left: 10px;">班级:</span>
        <div class="chooseBox bx">

          <selectMk :liDataGet="liDataGet" @change="change"></selectMk>


        </div>
        <div class="queryBtn">查询</div>
      </div> -->
      <div class="campus br bx" v-if="!editorTimeTableFlag">
        <div class="campusManagement_title bx">
          <div class="campusManagement_title_left">课表信息</div>
          <div class="campusManagement_title_right">
            <div class="campusManagement_title_btn" @click="editorTimeTable">课表编辑</div>
            <!-- <div class="campusManagement_title_btn">模板下载</div>
            <div class="campusManagement_title_btn">导入课表</div> -->
          </div>
        </div>
        <div class="campusManagement_weekName">
          <div class="weekName_title">课程时间</div>
          <div class="weekName_li" v-for="(item, index) in weekNameArr">周{{item}}</div>
        </div>
        <div class="commonBox_courseTableBox">
          <div class="commonBox_courseTable_left">
            <div class="commonBox_courseTable_left_li" v-for="(item, index) in courseTimeArr" :style="height">
              <span>{{item.start_time}}~{{item.end_time}}</span>
            </div>
          </div>
          <div class="commonBox_courseTable_right">
            <div class="commonBox_courseTable_right_li" v-for="(item, index) in courseArr" :style="height">
              <span>{{item.course1}}</span>
              <span>{{item.course2}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="campus br bx editorBox" v-if="editorTimeTableFlag">
        <div class="campusManagement_title bx">
          <div class="campusManagement_title_left">课表信息</div>
          <div class="campusManagement_title_right">
            <el-button type="primary" class="campusManagement_title_btn " :loading="editorSureFlag" @click="editorSure" :disabled="disabledFlag">完成</el-button>
            <el-button type="primary" class="campusManagement_title_btn " @click="resetSure">重置</el-button>
            <el-button type="primary" class="campusManagement_title_btn " @click="editorCancel">取消</el-button>

            <!-- <div class="campusManagement_title_btn">模板下载</div>
            <div class="campusManagement_title_btn">导入课表</div> -->
          </div>
        </div>
        <div class="campusManagement_weekName">
          <div class="weekName_subject">科目</div>
          <div class="weekName_title">课程时间</div>
          <div class="weekName_li" v-for="(item, index) in weekNameArr">周{{item}}</div>
        </div>
        <div class="commonBox_courseTableBox">
          <div class="commonBox_courseTable_subject bx">
            <div class="commonBox_courseTable_subject_li" v-for="(item, index) in subjectNameArr" @click="chooseSubject(item.course_name)"
              draggable='true' @dragstart='drag($event,item.course_name)'>
              <div class="bg" :class="item.course_name==chooseSubjectContent?'active':''">
                <span>{{item.course_name}}</span>
              </div>
            </div>
            <!-- <div class="commonBox_courseTable_subject_li" @click="addCourseBtn">
              <div class="bg">
                <span>新增</span>
              </div>
            </div> -->
          </div>
          <div class="commonBox_courseTable_left_add courseTableMask" ><div class="commonBox_courseTable_left_add down" @click="addCourseBtn"></div></div>
          <div class="commonBox_courseTable_left">
            <div class="commonBox_courseTable_left_li" v-for="(item, index) in courseTimeArr">
              <span>{{item.start_time}}~{{item.end_time}}</span>
            </div>
            <!-- <div class="commonBox_courseTable_left_add up" @click="lessonTimeFlagBtn"></div> -->
          </div>

          <div class="commonBox_courseTable_left_add courseTableMask leftMask" >          <div class="commonBox_courseTable_left_add down" @click="lessonTimeFlagBtn"></div></div>
          <div class="commonBox_courseTable_right">
            <div class="commonBox_courseTable_right_li" v-for="(item, index) in courseArr" :class=" item==''||item.course1==''?'nullStr':''"
              @click="sureSubject(index)" @drop='drop($event,index)' @dragover='allowDrop($event)'>
              <span draggable='true' @dragstart='drag1($event,item,index,1)' @drop='drop1($event,item,index)'>{{item.course1}}
                <i class="before" @click.stop="deletTextBtn(1,index)"></i>
              </span>
              <span v-if="item.course2" draggable='true' @dragstart='drag1($event,item,index,2)' @drop='drop1($event,item,index)'>{{item.course2}}
                <i class="before" @click.stop="deletTextBtn(2,index)"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="common_alertBox  addLessonTime" v-if="addLessonTimeFlag">
      <div class="common_alertBox_header">
        <span>新增时间</span>
      </div>
      <!-- <div class="common_alertBox_header" >
        <span>修改通知</span>
      </div> -->
      <div class="common_alertBox_content">
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span class="importentIcon">开始时间：</span>
            <div class="chooseBox paddingInput date">
              <el-time-select placeholder="选择时间" v-model="addLessonTimeData.start_time" :picker-options="{
                start: '06:00',
                step: '00:05',
                end: '23:00'
              }">
              </el-time-select>
            </div>
          </div>
          <div class="common_alertBox_li_right">
            <span class="importentIcon">结束时间：</span>
            <div class="chooseBox paddingInput date">
              <el-time-select placeholder="选择时间" v-model="addLessonTimeData.end_time" :picker-options="{
                start: '06:00',
                step: '00:05',
                end: '23:00'
              }">
              </el-time-select>
            </div>
          </div>
        </div>
      </div>
      <div class="common_alertBox_footer">
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="sureAddLessonTimeBtnFlag" @click="sureAddLessonTimeBtn">保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="addCourseCancelBtn">取消</el-button>

      </div>
    </div>
    <div class="common_alertBox addCourse" v-if="addCourseFlag">
      <div class="common_alertBox_header">
        <span>新增科目</span>
      </div>
      <!-- <div class="common_alertBox_header" >
        <span>修改通知</span>
      </div> -->
      <div class="common_alertBox_content">
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_center title">
            <span class="importentIcon">科目名称:</span>
            <div class="chooseBox paddingInput ">
              <input type="text" v-model="addCourseData.course_name">
            </div>
          </div>
        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_center">
            <span class="importentIcon">科目说明:</span>
            <div class="chooseBox textarea bx">
              <textarea name="" id="" cols="30" rows="10" v-model="addCourseData.remark"></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="common_alertBox_footer">
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="sureAddCourseBtnFlag" @click="sureAddCourseBtn">保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="addCourseCancelBtn">取消</el-button>

      </div>
    </div>
  </div>
</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求
  import draggable from 'vuedraggable'
  export default {
    name: 'home',
    data() {
      return {
        disabledFlag:false,
        editorSureFlag: false,
        sureAddLessonTimeBtnFlag: false,
        sureAddCourseBtnFlag: false,
        addLessonTimeFlag: false,
        addCourseFlag: false,
        week_start:'',
        dragFlag: false,
        start_time:'',
        end_time:'',
        addLessonTimeData: {
          lesson_index: '',
          start_time: '',
          end_time: ''
        },
        contrastData: [],
        contrastIndex: 0,
        addCourseData: {
          course_name: '',
          remark: ''
        },
        class_id: '',
        chooseSubjectContent: '',
        weekday: '',
        lesson_index: '',
        height: '',
        liDataGet: [{ //输入框数据
          title: '五年级1班'
        }, {
          title: '五年级2班'
        }, {
          title: '五年级3班'
        }, {
          title: '五年级4班'
        }, {
          title: '五年级5班'
        }],
        liDataGet1: [{ //输入框数据
          title: '五年级1班'
        }, {
          title: '五年级2班'
        }, {
          title: '五年级3班'
        }, {
          title: '五年级4班'
        }, {
          title: '五年级5班'
        }],
        weekNameArr: ['日', '一', '二', '三', '四', '五', '六'],
        subjectNameArr: ['语文', '语文', '语文', '语文', '语文', '语文', '语文', '语文', '语文', '语文', '数学'],
        courseTimeArr: [],
        courseArr: ["","","","","","","",{"course1":"化学"},"","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",{"course1":"化学"},"","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""],
        cancelCourseArr: [],
        editorTimeTableFlag: false,

      }
    },
    methods: {
      change: function (e) { //下拉框插件改变
        // console.log(e)
      },
      drag(e, name) {
        this.dragFlag = false;
        //console.log(e)
        this.chooseSubject(name);
      },
      drop(event, index) {
        event.preventDefault();
        //console.log(index)

        if (!this.dragFlag) {
          this.sureSubject(index);
        }

      },
      drop1(event, item, index) {
        event.preventDefault();
        if (this.dragFlag) {
          let arr = this.courseArr;
          this.courseArr = [];
          let str = '';
  
          if (item == this.contrastData) { //一天内切换
            if (arr[index].course2) { //有两个
              str = arr[index].course1
              arr[index].course1 = arr[index].course2
              arr[index].course2 = str;
              this.courseArr = arr;
            } else {
              this.courseArr = arr;
            }

          } else { //不同天内切换
            let obj = arr[this.contrastIndex];
            arr[this.contrastIndex] = item;
            arr[index] = obj;
            console.log(obj,item,arr[index])
            this.courseArr = arr;
          }

        }


      },
      drag1(e, item, index, type) {
        this.dragFlag = true;
        if (type == 1) {
          this.chooseSubject(item.course1)
        } else {
          this.chooseSubject(item.course2)
        }
        // //console.log(name)
        this.contrastData = item;
        this.contrastIndex = index;

      },
      allowDrop(event) {
        event.preventDefault(); //preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）
        //console.log(3)

      },
      datadragEnd(evt) {
        //console.log(2)

      },

      editorTimeTable() {
        this.editorTimeTableFlag = true;
        this.cancelCourseArr = JSON.stringify(this.courseArr);
      },

      addCourseCancelBtn() {
        //取消
        this.addCourseFlag = false;
        this.addLessonTimeFlag = false;
        $('.mask').hide();
      },
      editorSure() {

        //console.log(this.courseArr)

        let arr0 = {
          "weekday": 0,
          "list": []
        };
        let arr1 = {
          "weekday": 1,
          "list": []
        };
        let arr2 = {
          "weekday": 2,
          "list": []
        };
        let arr3 = {
          "weekday": 3,
          "list": []
        };
        let arr4 = {
          "weekday": 4,
          "list": []
        };
        let arr5 = {
          "weekday": 5,
          "list": []
        };
        let arr6 = {
          "weekday": 6,
          "list": []
        };
       if( this.week_start==='0'){
        this.courseArr.map((val, index) => {

          switch (index % 7) {
            case 0:
              this.getPushData(val, index / 7 + 1) ? arr0.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 1:
              this.getPushData(val, index / 7 + 1) ? arr1.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 2:
              this.getPushData(val, index / 7 + 1) ? arr2.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 3:
              this.getPushData(val, index / 7 + 1) ? arr3.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 4:
              this.getPushData(val, index / 7 + 1) ? arr4.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 5:
              this.getPushData(val, index / 7 + 1) ? arr5.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 6:
              this.getPushData(val, index / 7 + 1) ? arr6.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
          }

        })
       }else{
        this.courseArr.map((val, index) => {

          switch (index % 7) {
            case 0:
              this.getPushData(val, index / 7 + 1) ? arr1.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 1:
              this.getPushData(val, index / 7 + 1) ? arr2.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 2:
              this.getPushData(val, index / 7 + 1) ? arr3.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 3:
              this.getPushData(val, index / 7 + 1) ? arr4.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 4:
              this.getPushData(val, index / 7 + 1) ? arr5.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 5:
              this.getPushData(val, index / 7 + 1) ? arr6.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
            case 6:
              this.getPushData(val, index / 7 + 1) ? arr0.list.push(this.getPushData(val, index / 7 + 1)) : '';
              break;
          }

        })
       }

        let pushArr = [arr0, arr1, arr2, arr3, arr4, arr5, arr6];


        // return
        var _this = this;
        _this.editorSureFlag = true;





      },
      editorCancel() {
        this.courseArr = JSON.parse(this.cancelCourseArr);
        this.cancelBtn();
      },
      resetSure() {
        let _this = this;
        let arr0 = {
          "weekday": 0,
          "list": []
        };
        let arr1 = {
          "weekday": 1,
          "list": []
        };
        let arr2 = {
          "weekday": 2,
          "list": []
        };
        let arr3 = {
          "weekday": 3,
          "list": []
        };
        let arr4 = {
          "weekday": 4,
          "list": []
        };
        let arr5 = {
          "weekday": 5,
          "list": []
        };
        let arr6 = {
          "weekday": 6,
          "list": []
        };
        let pushArr = [arr0, arr1, arr2, arr3, arr4, arr5, arr6];
        let arr=this.courseArr;
        this.courseArr=[];
        arr.map((e,i)=>{
          arr[i]=''
        })
        this.courseArr=arr;
        this.disabledFlag=true;
        // for(var i=0;i<_this.lesson_index;i++){
        //   for(var j=0;j<pushArr.length;j++){
        //     pushArr[j].list[i]='';
        //   }
        // }




        // this.$confirm('是否重置课表?', '提示', {
        //   confirmButtonText: '重置',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {



        
      },
      getPushData(val, index) {
        index = Math.floor(index)
        let id=this.getCouseId(val.course1);
        let id2=this.getCouseId(val.course2);
        if(!id){
          return false
        }
        if (val) {
          if (val.course2) { //有两个
            return JSON.parse('{"lesson_index":' + index + ',"course_id":"' + id + ',' + id2 + '"}')
          } else { //有一个
            return JSON.parse('{"lesson_index":' + index + ',"course_id":"' + id + '"}');
          }


        }


      },
      getCouseId(txt) {
        let str = '';
        this.subjectNameArr.map((val, index) => {
          if (val.course_name == txt) {
            str = val.id;
          }
        })
        return str;
      },
      addCourseBtn() {
        this.addCourseFlag = !this.addCourseFlag; //新增课程
        $('.mask').show();
      },
      lessonTimeFlagBtn() {
        this.addLessonTimeFlag = !this.addLessonTimeFlag; //新增时间
        $('.mask').show();
      },
      deletTextBtn(num, index) {
      
        let arr = this.courseArr;
        this.courseArr = [];
        switch (num) {
          case 1:
            if (arr[index].course2) { //如果有两个科目
              arr[index] = {
                course1: arr[index].course2
              }
            } else { //如果只有一个科目
              arr[index] = ''
            };
            break;
          case 2:
            arr[index] = {
              course1: arr[index].course1
            };
            break;
        }
        this.courseArr = arr;
        this.checkNull();
      },
      sureSubject(index) {
        var arr = this.courseArr;
        var text = this.chooseSubjectContent;
        this.courseArr = [];
        if (arr[index].course1 == text || arr[index].course2 == text) {
          if (arr[index].course1 == text) { //如果第一科目相同
            if (arr[index].course2) { //如果有第二个科目
              arr[index] = {
                course1: arr[index].course1
              }
            } else {

            }
          }
        } else {
          if (arr[index].course1) {
            arr[index] = {
              course1: arr[index].course1,
              course2: text

            }
          } else {
            arr[index] = {
              course1: text
            }
          }
        }

        this.courseArr = arr;
        this.checkNull();

      },
      chooseSubject(item) {
        //选择科目
        this.chooseSubjectContent = item;

      },
      getCourse() {
        // //console.log(page + '_' + pagesize)
        let _this = this;
        let class_id = _this.class_id;


      },
      getLessonTime() {
        // //console.log(page + '_' + pagesize)
        let _this = this;
        let class_id = _this.class_id;




      },
      checkNull(){
        //console.log(this.courseArr,1)
        let flag=false;
        this.courseArr.map((e,i)=>{
         
          if(e!=''){
            if(e.course1!=''){
              flag=true;
              return
            }
          }
        })
        this.disabledFlag=flag?false:true;
      },
      getData() { //获取数据

        // //console.log(page + '_' + pagesize)
        let _this = this;
        let class_id = _this.class_id;


      },
      cancelBtn() {
        this.addLessonTimeFlag = false;
        this.addCourseFlag = false;
        this.editorTimeTableFlag = false;
        this.editorSureFlag = false;
        this.sureAddLessonTimeBtnFlag = false;
        this.sureAddCourseBtnFlag = false;
        this.disabledFlag=false;
        $('.mask').hide();

      },
      sureAddCourseBtn() {
        if (this.trim(this.addCourseData.course_name) === '') {
          this.$message.error('科目名称不能为空');
          return;
        } else if (this.trim(this.addCourseData.remark) === '') {
          this.$message.error('科目说明不能为空');
          return;
        }

        var _this = this;

        _this.sureAddCourseBtnFlag = true;




      },
      sureAddLessonTimeBtn() {
        if (this.addLessonTimeData.start_time === '') {
          this.$message.error('开始时间不能为空');
          return;
        } else if (this.addLessonTimeData.end_time === '') {
          this.$message.error('结束时间不能为空');
          return;
        }
        this.sureAddLessonTimeBtnFlag = true
        this.addLessonTimeData.lesson_index = this.lesson_index + 1;
        // let postData = this.$qs.stringify({
        //   lesson_index: this.addLessonTimeData.lesson_index,
        //   start_time: this.addLessonTimeData.start_time,
        //   end_time: this.addLessonTimeData.end_time
        // });
        // //console.log(postData)
        var _this = this;




      },


    },
       mounted () {
            //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
            // document.body.ondrop = function (event) {
            //     event.preventDefault();
            //     event.stopPropagation();
            // }
         
        },
    components: {
      draggable,
    },
    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .timetable {
    width: 100%;
    height: 100%;
  }

  .campusManagementBox {
    width: 100%;
    height: 100%;
    /* padding-top: 98px; */
    position: relative;
  }

  .campus {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-top: 100px;
    position: relative;
    overflow: auto;
  }

  .campusManagement_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .campusManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
  }

  .campusManagement_title_right {
    display: flex;
    align-items: center;
  }

  .campusManagement_weekName {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }

  .weekName_title {
    width: 10%;
  }

  .weekName_li {
    width: 18%;
  }

  .editorBox .weekName_title,
  .editorBox .weekName_li,
  .editorBox .weekName_subject {
    width: 11%;
  }

  .editorBox .commonBox_courseTable_left {
    width: 11%;
    overflow: auto;
    margin-bottom: 50px;
  }

  .editorBox .commonBox_courseTable_subject {
    width: 11%;
    /* height: 100%; */
    overflow: auto;
    position: relative;
    margin-bottom: 50px;
  }

  .editorBox .commonBox_courseTable_subject_li {
    height: 9%;

    display: flex;
    align-items: center;
    justify-content: center;

  }

  .campusManagement_title_btn {
    font-size: 18px;
    cursor: pointer;
  }

  .editorBox .commonBox_courseTable_subject_li .bg {
    width: 80%;
    height: 80%;
    max-height: 40px;
    background: #4db3f8;
    border-radius: 4px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

  .editorBox .commonBox_courseTable_subject_li .bg.active {
    background: #2090ce;
  }

  .editorBox .commonBox_courseTable_left_li span {
    line-height: 60px;
    height: 60px;
    display: block;
  }

  .editorBox .commonBox_courseTable_right_li span {
    padding: 0 20px;
    position: relative;
    z-index: 10;
    line-height: 40px;
    height: 40px;
    display: block;

  }

  .editorBox .commonBox_courseTable_right_li span i.before {
    position: absolute;
    right: 10px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: url('../../../../static/images/delete.png') 23px 23px;
    opacity: 0.8;
    cursor: pointer;
    transition: transform 0.5s;
  }

  .editorBox .commonBox_courseTable_left {
    position: relative;
  }

  .editorBox .commonBox_courseTable_left_add {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0px;

    background: url('../../../../static/images/add.png');
    z-index: 1;
  }

  .editorBox .commonBox_courseTable_left_add.up {
    bottom: 10px;
    left: 50%;
  }

  .editorBox .commonBox_courseTable_left_add.down {
    bottom: 10px;
    left: 50%;
  }
  .editorBox .commonBox_courseTable_left_add.courseTableMask {

width: 11%;
height: 50px;
bottom: 0;
z-index: 0;
background: #fff;
  }
  .editorBox .commonBox_courseTable_left_add.courseTableMask.leftMask{
    left: 11%;
  }
  .editorBox .commonBox_courseTable_right_li span i.before:hover {
    transform: scale(1.5)
  }

  .editorBox .commonBox_courseTable_right_li.nullStr span i.before {
    display: none;
  }

  .editorBox .commonBox_courseTable_right_li.nullStr {
    background: #c4c4c4;
  }

  .editorBox .commonBox_courseTable_right {
    width: 78%;
    overflow: auto;
  }

  .commonBox_courseTableBox {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .commonBox_courseTable_left {
    width: 7.4%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* align-items: center; */
    align-content: flex-start;
  }

  .commonBox_courseTable_right {
    width: 92.6%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .commonBox_courseTable_left_li {

    /* height: 16.67%; */
    max-height: 40px;
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .commonBox_courseTable_right_li {

    width: 13.2%;
    margin-top: 10px;
    max-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4db3f8;
    border-radius: 4px;
    font-size: 28px;
    color: #fff;
    overflow: hidden;
  }

  .common_alertBox_li_right,
  .common_alertBox_li_left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .common_alertBox_footer {
    padding: 35px 275px 0;
  }

  .addLessonTime {
    width: 834px;
    height: 288px;
  }

  .common_alertBox_li_center {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .textarea {
    width: 650px;
    height: 138px;
    padding: 2px;
  }

  .title {
    align-items: center;
  }

  .addCourse {
    width: 833px;
    height: 438px;
  }

  .textarea textarea {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: 18px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
  }

</style>
